<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>借书证</title>
    <link rel="stylesheet" href="./css/librarycard.css">
    <!-- 引入图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3329812_875cpifco4l.css">
    <!-- 引入字体 -->
    <link rel="stylesheet" href="./css/fontsize.css">
    <!-- 引入滚动 -->
    <!-- 引入 scrollreveal -->
    <script src="https://unpkg.com/scrollreveal"></script>
    <script src="./js/librarycard.js"></script>
    <!--    引入jquery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="center2">
        <!-- 导航栏 -->
        <div class="nav">
            <a th:href="@{/desk}" class="active"><i class="iconfont icon-shouye"></i>首页</a>
            <a href="#" class="active"><i class="iconfont icon-sousuo"></i>搜索</a>
            <a th:href="@{/library}" class="active "><i class="iconfont icon-shezhi"></i>藏书阁</a>
            <a th:href="@{libraryCard}" class="activey special"><i class="iconfont icon-guanyu"></i>借书证</a>
        </div>
    </div>
    <div class="big">
        <!-- <p>借书证</p> -->
        <div class="big-left">
            <!-- 用户信息 -->
            <div class="card">
                <p class="information">用户信息</p>
                <p class="information-detail">用户名：[[${session.User.userName}]] </p>
                <p class="information-detail displayid" >密码：[[${session.User.password}]]</p>
                <p class="information-detail">公司：[[${session.User.company}]]</p>
                <p class="information-detail">职位：[[${session.User.job}]]</p>
            </div>
            <div class="borrow-books-remaining">
                <div class="remainder">
<!--                    <p>剩余可借数量: ${user.remaindrbooks}</p>-->
                </div>
            </div>
        </div>
        <div class="return-book">
            <!-- 表格 -->
<!--            <form action="#">-->
            <div class="importants">
                <table border="1" cellpadding="0" cellspacing="0" class="tables" id="table">
                    <!-- 表头 -->
                    <thead>
                    <tr class="firstTr">
                        <th  class="displayid">id</th>
                        <th >书名</th>
                        <th >作者</th>
                        <th >借书时间</th>
                        <th >到期时间</th>
<!--                        <th width="8%">是否归还</th>-->
                        <th >操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
<!--                        <tr id="bookTable">-->
<!--                            <td class="displayid">-->
<!--                                ${news.id }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.booksid }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.newsname }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.returntime }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                ${news.isreturn }-->
<!--                            </td>-->
<!--                            <td>-->
<!--                                <a href="#" class="borrow"> 还书</a>-->
<!--                            </td>-->
<!--                        </tr>-->
                    </tbody>
                </table>
            </div>
<!--            </form>-->

        </div>
        <!-- 还书成功遮盖层 -->
        <!-- 借书遮盖层 -->
        <div class="container">
            <!-- 弹出框 -->
            <div class="container-content">
                <div class="content-detail">
                    <p>确定还这本书吗?</p>
                </div>
                <!-- value：后台保存的值 -->
                <button class="decoration determine"  id="determine" >确定</button>
                <button class="decoration canle" id="cancel">取消</button>
            </div>
        </div>

        <!-- 借书成功遮盖层 -->
        <div class="container1">
            <!-- 弹出框 -->
            <div class="container1-content1">
                <div class="content1-detail">
                    <p><i class="iconfont icon-chenggong"></i>还书成功!</p>
                </div>
            </div>
        </div>

        <div class="container2">
            <div class="container2-content2">
                <div class="content2-detail">
                    <p><i class="iconfont icon-shibai"></i>还书失败!</p>
                </div>
            </div>
        </div>
    </div>

</body>


</html>